<template>
	<view class="changeage">
		<view class="bg"></view>
		<view class="imagesHeader">
			<view class="imagesHeaderText">					
				视频生成
			</view>			
		</view>			
		<view class="v_tab">
			<text :class="['v_tab_text', 'text_left', type === 1 ? 'active' : '']" @click="type=1">文生视频</text>
			<text :class="['v_tab_text', 'text_right', type === 2 ? 'active' : '']" @click="type=2">图生视频</text>
		</view>
		<view class="top">
			<textarea class="top_input" type="text" v-model="prompt" maxlength="-1"
				placeholder="请输入您想要的内容，支持中英文，用逗号分割......" selection-start="0"> </textarea>
		</view>
		<view v-if="type==2" class="v_image" @click="onAddImgClick">
			<text class="v_image_text" v-if="!template_id">+</text>
			<text style="color: #333;" v-if="!template_id">上传图片</text>
			<image :src="template_url" v-if="template_id" style="width: 100%;height: 100%;border-radius: 20rpx;"
				mode="aspectFit"></image>
		</view>
		<view class="bottom">
			<view class="item">
				<view class="item_1">
					<text class="t1" style="font-size: 29rpx;">生成通道</text>
					<uni-icons type="info" class="t2" size="33rpx" color="red"></uni-icons>
				</view>
				<radio-group @change="changeTongdao" class="rg">
					<label class="rg_c">
						<radio value="1" checked="true" class="ro" /><text class="tt">通道1</text>
					</label>
				</radio-group>
			</view>
			<view class="line"></view>
			<view class="item">
				<text class="t1">生成尺寸</text>
				<view class="item2">
					<radio-group class="rg" @change="cicun=$event.detail.value">
						<label class="rg_c">
							<radio value="9:16" checked="true" class="ro" /><text class="tt">9:16</text>
						</label>
						<label class="rg_c">
							<radio value="16:9" class="ro" /><text class="tt">16:9</text>
						</label>
						<label class="rg_c">
							<radio value="1:1" class="ro" /><text class="tt">1:1</text>
						</label>
						<label class="rg_c">
							<radio value="4:3" class="ro" /><text class="tt">4:3</text>
						</label>
						<label class="rg_c">
							<radio value="3:4" class="ro" /><text class="tt">3:4</text>
						</label>
						<label class="rg_c">
							<radio value="21:9" class="ro" /><text class="tt">21:9</text>
						</label class="rg_c">
					</radio-group>
				</view>
			</view>
		</view>

		<button class="btn" @click="startBianLian" :loading="loadding" :disabled="loadding">开始生成</button>
		<text v-if="price" class="t_price">{{price}}</text>
		<text class="t1">效果展示</text>
		<view class="zanshi" v-if="type==1">
			<view class="tip">
				<view class="t2">
					<text class="t21">案例提示词：</text>
					<view class="t22">一位眉眼如画、仪态端庄的东方佳人，身着流光溢彩的传统汉服，在雕梁画栋的宫殿里翩然起舞。她云袖翻飞似惊鸿游龙，婀娜的身姿随着古典乐韵轻盈旋转。
					摄影师运用升降镜头捕捉舞者飘逸的衣袂，柔和的宫灯将金碧辉煌的殿堂笼罩在朦胧光晕中，整个画面宛如一幅流动的工笔重彩。</view>
				</view>
			</view>
			<image class="ii" src="/static/img/video_create_arrow.png"></image>
			<image class="vv" src="https://sm.2sxzw.com/mgmg/jiabin01/video_create/ajdhfja3Swuhd.webp"></image>
		</view>
		<view style="display: flex;flex-direction: column;" v-else>
			<view class="aa2">
				<text class="t21">案例提示词：</text>
				<view class="t22">画面中的美女跳舞超带感！动作行云流水，笑起来甜度爆表~</view>
			</view>
			<view class="zanshi">
				<image class="tip" style="padding: 0;" src="https://sm.2sxzw.com/mgmg/jiabin01/video_create/ShiPing2Img.jpeg" mode="aspectFill"></image>
				<image class="ii" src="/static/img/video_create_arrow.png"></image>
				<image class="vv" src="https://sm.2sxzw.com/mgmg/jiabin01/video_create/asjfgajsdf2PJGjhg.webp"></image>
			</view>

		</view>
	</view>
</template>

<script>
	import {
		getUser,
		getAbilityPrice
	} from '@/src/utils/utils.js';

	import {
		TextToVideo,
		ImageToVideo
	} from '@/src/api/huanlian.js';
	import {
		upload_file
	} from '@/src/utils/uni-fetch.js';
	export default {
		data() {
			return {
				prompt: null,
				loadding: false,
				price: null,
				tongdao: 1,
				cicun: "9:16",
				type: 1,
				template_id: null,
				template_url: null,
			};
		},
		onLoad() {
			this.init_price();
		},
		methods: {

			changeTongdao(v) {
				this.tongdao = v.detail.value
			},
			async init_price() {
				try {
					this.price = await getAbilityPrice('VideoCreate1')
				} catch (e) {
					console.log(e)
				}
			},
			async onAddImgClick() {
				const [error, res] = await uni.chooseImage({
					count: 1,
					sizeType: ['compressed', 'original'],
					sourceType: ['album', 'camera'] //从相册选择
				});
				if (error) {
					console.error(error, error.errMsg)
					if (error.errCode == -2 || error.errCode == 0) return;
					uni.showModal({
						title: '选取图片失败',
						content: error.errMsg,
						showCancel: false
					});
					return;
				}
				try {
					let result = await upload_file({
						url: '/huanlian/up_image2/',
						file: {
							name: 'image',
							uri: res.tempFilePaths[0]
						},
						formData: {
							img_type: 1
						}
					});
					this.template_id = result.data.id;
					this.template_url = res.tempFilePaths[0];
				} catch (e) {
					if (!e) return
					uni.showModal({
						content: e.errMsg || e.message,
						showCancel: false
					});
				}
			},
			async startBianLian() {
				if (!this.prompt) {
					this.$showToast('请输入描述文字');
					return;
				}
				if (this.type == 2 && !this.template_id) {
					this.$showToast('请上传图片');
					return;
				}
				try {
					this.loadding = true
					let up_data_json = {
						prompt: this.prompt,
						tongdao: this.tongdao,
						cicun: this.cicun
					}
					let result = null
					if (this.type == 1) {
						result = await TextToVideo(up_data_json);
					} else {
						up_data_json["template_id"] = this.template_id
						result = await ImageToVideo(up_data_json);
					}
					getUser({}, true);
					uni.hideLoading();
					uni.navigateTo({
						url: '/src/pages/My/JobList/JobList'
					});
				} catch (e) {
					if (!e) return
					console.log(e.errMsg || e.message)
					uni.showModal({
						content: e.errMsg || e.message,
						showCancel: false
					});
				} finally {
					this.loadding = false
				}
			}
		}
	};
</script>
<style lang="scss" scoped>
	@import 'ShiPingCreate.scss';
</style>